<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <meta name="x5-fullscreen" content="true">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

  <!-- 标题及搜索关键字 -->
  <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
  <meta name="description"
    content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS" />

  <link rel="shortcut icon" type="image/x-icon" href="http://mars3d.cn/favicon.ico">
  <title>Point 点|Mars3D|三维地图| 火星科技|合肥火星科技|合肥火星科技有限公司</title>


  <script type="text/javascript" src="../lib/include-lib.js" libpath="../lib/"
    include="jquery,font-awesome,bootstrap,bootstrap-checkbox,layer,haoutil,turf,mars3d"></script>

  <link href="css/style.css" rel="stylesheet" />
  <link href="css/divpoint.css" rel="stylesheet" />
</head>

<body class="dark">
  <!--加载前进行操作提示，优化用户体验-->
  <div id="mask" class="signmask" onclick="removeMask()"></div>

  <div id="mars3dContainer" class="mars3d-container"></div>


  <div class="infoview">
    <div>
      图层状态：
      <div class="checkbox checkbox-primary checkbox-inline">
        <input id="chkShow" class="styled" type="checkbox" checked>
        <label for="chkShow">
          显示隐藏
        </label>
      </div>
      <div class="checkbox checkbox-primary checkbox-inline">
        <input id="chkPopup" class="styled" type="checkbox" checked>
        <label for="chkPopup">
          Popup绑定
        </label>
      </div>
      <div class="checkbox checkbox-primary checkbox-inline">
        <input id="chkTooltip" class="styled" type="checkbox">
        <label for="chkTooltip">
          Tooltip绑定
        </label>
      </div>
      <!-- <div class="checkbox checkbox-primary checkbox-inline">
        <input id="chkContextMenu" class="styled" type="checkbox" checked>
        <label for="chkContextMenu">
          右键菜单绑定
        </label>
      </div> -->
    </div>
    <div>
      数据维护：
      <input id="btnStartDraw" type="button" class="btn btn-primary" value="图上标绘" title="在图上绘制新增一个矢量数据" />

      <div class="checkbox checkbox-primary checkbox-inline">
        <input id="chkHasEdit" class="styled" type="checkbox">
        <label for="chkHasEdit">
          是否编辑
        </label>
      </div>
    </div>
    <div>
      数据管理：
      <input id="btnClear" type="button" class="btn btn-danger" value="清除" />
      <input id="btnExpFile" type="button" class="btn btn-primary" value="保存GeoJSON" title="保存为GeoJSON文件" />
      <input id="btnImpFile" type="button" class="btn btn-primary" value="打开GeoJSON" title="打开之前保存的GeoJSON文件" />

      <input id="input_draw_file" type="file" accept=".json" style="display:none;" />
    </div>
  </div>

  <!-- 切换视角到模型或地形（山区）的快捷按钮 -->
  <script type="text/javascript" src="js/center_terrain_3dtiles.js"></script>

  <!-- 图层管理相关处理js -->
  <script type="text/javascript" src="./js/graphicManager.js"></script>


  <script src="./js/common.js"></script>
  <script type="text/javascript">
    'use script' //开发环境建议开启严格模式

    var map

    function initMap(options) {
      //合并属性参数，可覆盖config.json中的对应配置
      var mapOptions = mars3d.Util.merge(options, {
        scene: {
          center: { lat: 30.519639, lng: 116.489725, alt: 60366, heading: 0, pitch: -45 },
        },
      })

      //创建三维地球场景
      map = new mars3d.Map('mars3dContainer', mapOptions)

      //创建DIV数据图层
      var graphicLayer = new mars3d.layer.DivLayer()
      map.addLayer(graphicLayer)

      //图层管理的相关处理，代码在\js\graphicManager.js
      initLayerManager(graphicLayer)

      $('#btnStartDraw').click(function () {
        graphicLayer.startDraw({
          type: 'div',
          style: {
            html: `<div class="divpoint2">
                            <div class="title">测试DIV点</div>
                            <div class="content">此处可以绑定任意Html代码和css效果</div>
                        </div >`,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          },
        })
      })

      //加一些演示数据
      addGraphic_01(graphicLayer)
      addGraphic_01(graphicLayer)
      addGraphic_02(graphicLayer)
      addGraphic_03(graphicLayer)
      addGraphic_04(graphicLayer)
      addGraphic_05(graphicLayer)
      addGraphic_06(graphicLayer)
      addGraphic_07(graphicLayer)
      addGraphic_08(graphicLayer)
      addGraphic_09(graphicLayer)
      addGraphic_10(graphicLayer)
    }

    //一个简单的文本
    function addGraphic_01(graphicLayer) {
      var graphic = new mars3d.graphic.DivGraphic({
        position: [116.741611, 31.408068, 75.5],
        style: {
          html: `<div class="mars3d-divlabel">
                    <div class="mars3d-divlabel-text">合肥火星科技有限公司</div>
                </div>`,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), //按视距距离显示
        },
      })
      graphicLayer.addGraphic(graphic)
    }

    //一个简单的文本
    function addGraphic_02(graphicLayer) {
      var graphic = new mars3d.graphic.DivGraphic({
        position: [116.510732, 31.403786, 176.4],
        style: {
          html: `<div class="mars3d-gradient-label">
                    <div>合肥火星科技有限公司</div>
                </div>`,
          offsetY: -60,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), //按视距距离显示
        },
      })
      graphicLayer.addGraphic(graphic)
    }

    //类似toolitp的自定义html
    function addGraphic_03(graphicLayer) {
      var graphic = new mars3d.graphic.DivGraphic({
        position: [116.146461, 31.380152, 395.1],
        style: {
          html: `<div class="mars3d-popup-content-wrapper  divpoint-background">
                  <div class="mars3d-popup-content divpoint-color">
                      这里可以放入任意html代码
                  </div>
              </div>
              <div class="mars3d-popup-tip-container"><div class="mars3d-popup-tip divpoint-background"></div></div>`,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示
        },
      })
      graphicLayer.addGraphic(graphic)
    }

    //添加GIF图标，DIV方式
    function addGraphic_04(graphicLayer) {
      var graphic = new mars3d.graphic.DivGraphic({
        position: [116.79013, 31.164872, 289],
        style: {
          html: '<img src="img/marker/tf.gif" style="width:100px;height:100px;" ></img>',
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
        },
        pointerEvents: false, //false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
      })
      graphicLayer.addGraphic(graphic)
    }

    //添加GIF图标，DIV方式
    function addGraphic_05(graphicLayer) {
      var graphic = new mars3d.graphic.DivGraphic({
        position: [116.144401, 31.183562, 873.3],
        style: {
          html: '<img src="img/marker/emergency.gif" style="width:100px;height:100px;" ></img>',
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
        },
        pointerEvents: false, //false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
      })
      graphicLayer.addGraphic(graphic)
    }

    //加css动画的扩散点 DivLightPoint
    function addGraphic_06(graphicLayer) {
      var graphic = new mars3d.graphic.DivLightPoint({
        position: [116.630276, 31.213813, 215.6],
        style: {
          color: '#f33349',
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示
        },
      })
      graphicLayer.addGraphic(graphic)
    }

    //内置扩展的动态文本 DivBoderLabel
    function addGraphic_07(graphicLayer) {
      var graphic = new mars3d.graphic.DivBoderLabel({
        position: [116.460722, 31.140888, 781],
        style: {
          text: 'Mars3D三维地球平台软件',
          font_size: 15,
          font_family: '微软雅黑',
          color: '#ccc',
          boderColor: '#15d1f2',
        },
      })
      graphicLayer.addGraphic(graphic)
    }

    //内置扩展的竖立文本 DivBoderLabel
    function addGraphic_08(graphicLayer) {
      var graphic = new mars3d.graphic.DivUpLabel({
        position: [116.327136, 30.99723, 914.6],
        style: {
          text: '我是竖立的文本',
          color: '#fff',
          font_size: 16,
          font_family: '微软雅黑',
          lineHeight: 60,
          circleSize: 8,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000), //按视距距离显示
        },
      })
      graphicLayer.addGraphic(graphic)
    }

    //自定义的面板
    function addGraphic_09(graphicLayer) {
      var graphic = new mars3d.graphic.DivGraphic({
        position: [116.228043, 30.882207],
        style: {
          html: `<div class="divpoint divpoint-theme-29baf1">
                <div class="divpoint-wrap">
                    <div class="area">
                        <div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">大别山水厂</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">实时流量：</div>
                                    <div class="data-value"><span class="label-num">99</span><span class="label-unit">m³/s</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水池液位：</div>
                                    <div class="data-value"><span class="label-num">20.02</span><span class="label-unit">m</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水泵状态：</div>
                                    <div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span
                                            class="label-tag data-value-status-0" alt="关闭状态">2号</span></div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">出水阀门：</div>
                                    <div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span
                                            class="label-tag data-value-status-2" alt="打开状态">2号</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="b-t-l"></div>
                    <div class="b-b-r"></div>
                </div>
                <div class="arrow" ></div>
            </div>`,
          // anchor: [0, 0],
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示
          scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
          clampToGround: true,
        },
        //可以传入自定义测试点样式
        // testPoint: {
        //   color: '#ff0000',
        //   pixelSize: 8,
        // },
        pointerEvents: false, //false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
      })
      graphicLayer.addGraphic(graphic)

      graphic.testPoint = true //打开测试点，与DIV点进行对比位置调整css
    }

    //自定义的面板
    function addGraphic_10(graphicLayer) {
      var graphic = new mars3d.graphic.DivGraphic({
        position: Cesium.Cartesian3.fromDegrees(116.706926, 30.945346, 457.5),
        style: {
          html: `<div class="divpoint divpoint-theme-29baf1">
                <div class="divpoint-wrap">
                    <div class="area">
                        <div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">岳西水厂</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">实时流量：</div>
                                    <div class="data-value"><span class="label-num">98</span><span class="label-unit">m³/s</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水池液位：</div>
                                    <div class="data-value"><span class="label-num">13.14</span><span class="label-unit">m</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水泵状态：</div>
                                    <div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span
                                            class="label-tag data-value-status-0" alt="关闭状态">2号</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="b-t-l"></div>
                    <div class="b-b-r"></div>
                </div>
                <div class="arrow" ></div>
            </div>`,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), //按视距距离显示
        },
      })
      graphicLayer.addGraphic(graphic)

      movePoint(graphic) //动画移动示例
    }

    //动画移动示例
    function movePoint(graphic) {
      map.clock.shouldAnimate = true

      //动画移动
      var property = new Cesium.SampledPositionProperty()
      var time = 20 //移动的时长 ，秒
      var tempTime

      //起点
      var startPoint = Cesium.Cartesian3.fromDegrees(116.706926, 30.945346, 457.5)
      tempTime = map.clock.currentTime //飞行开始时间
      property.addSample(tempTime, startPoint)

      //移动到的第1个目标点
      var point1 = Cesium.Cartesian3.fromDegrees(116.311439, 30.76485, 423.7)
      tempTime = Cesium.JulianDate.addSeconds(tempTime, time, new Cesium.JulianDate())
      property.addSample(tempTime, point1)

      //移动到的第2个目标点
      var point2 = Cesium.Cartesian3.fromDegrees(116.63081, 30.786585, 85)
      tempTime = Cesium.JulianDate.addSeconds(tempTime, time, new Cesium.JulianDate())
      property.addSample(tempTime, point2)

      //移动到的第3个目标点
      var point3 = Cesium.Cartesian3.fromDegrees(116.706926, 30.945346, 457.5)
      tempTime = Cesium.JulianDate.addSeconds(tempTime, time, new Cesium.JulianDate())
      property.addSample(tempTime, point3)

      //为了保证到结束时间了，一直停留在那，所以加个很远的时间
      tempTime = Cesium.JulianDate.addDays(tempTime, 365, new Cesium.JulianDate())
      property.addSample(tempTime, point3)

      graphic.position = property
    }
  </script>
</body>

</html>
